<template>
  <div class="app-container" style="display: flex;gap: 10px;box-sizing: border-box;flex-direction: column;">
    <el-card class="box-card" style="flex: 1;" shadow="hover">
      <div
        slot="header"
        class="clearfix"
      >
        <span style="font-weight: 600;font-size: large;">物料选择</span>
      </div>
      <div style="display: flex;justify-content: space-around;">
        <div>
          <label>物料编码</label>
          <el-input v-model.trim="material.productNo" clearable placeholder="物料编码" style="width: 185px;" />
        </div>
        <div>
          <label>客户物料编码</label>
          <el-input v-model.trim="material.partnerProductNo" clearable placeholder="客户物料编码" style="width: 185px;" />
        </div>
        <div>
          <label>数量</label>
          <el-input v-model.number="material.wantQty" clearable placeholder="数量" style="width: 185px;" />
        </div>
        <div>
          <label>出库单号</label>
          <!-- <el-input v-model="material.qty" clearable placeholder="数量" style="width: 185px;" /> -->
          <el-select v-model.trim="selectOrder" filterable clearable placeholder="请选择" @change="searchDetail">
            <el-option
              v-for="item in outboundList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <el-button type="primary" round @click="addMaterial">添加物料</el-button>
      </div>
    </el-card>
    <el-card style="flex: 1;" shadow="hover">
      <div
        slot="header"
        class="clearfix"
      >
        <span style="font-weight: 600;font-size: large;">物料列表</span>
      </div>
      <el-table
        :data="list"
        style="width: 100%"
      >
        <el-table-column prop="productNo" label="物料编码" />
        <el-table-column prop="partnerProductNo" label="客户物料编码" />
        <el-table-column prop="wantQty" label="数量">
          <template slot-scope="scope">
            <div v-if="scope.row.flag === 'edit'">
              <el-input v-model.number="scope.row.wantQty" style="width: 140px;" :placeholder="scope.row.wantQty" />
            </div>
            <div v-else>
              {{ scope.row.wantQty }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="qty" label="关联工单数量" />
        <el-table-column prop="expectedOutQty" label="预计出库数量" />
        <el-table-column prop="actualOutQty" label="实际出库数量" />
        <el-table-column label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <el-button
              v-show="scope.row.flag === ''"
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="changeStatus(scope.row)"
            />
            <el-button
              v-show="scope.row.flag === 'edit'"
              type="text"
              @click="changeStatus(scope.row)"
            >
              编辑完成
            </el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="delItem(scope.$index)"
            />
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;align-items: center;margin-top: 10px;gap: 10px;justify-content: flex-end;">
        <el-checkbox v-model="checkBox.isNightStockUp">晚间备货</el-checkbox>
        <el-checkbox v-model="checkBox.isAppointmentTally">预约理货</el-checkbox>
        <el-button size="mini" :loading="btn.createLoading" :disabled="list.length === 0" type="primary" @click="createOrder">创建出库单</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { createOrderAPI, outboundOrderListAPI, getDetailListAPI } from '@/api/work/outBoundCreate'
export default {
  name: 'OutBoundCreate',
  data() {
    return {
      // isNightStockUp 晚间备货 0 1
      // isAppointmentTally 预约理货 0 1
      list: [],
      material: {
        productNo: '',
        partnerProductNo: '',
        qty: ''
      },
      checkBox: {
        isNightStockUp: 0,
        isAppointmentTally: 0
      },
      btn: {
        createLoading: false
      },
      outboundList: [],
      selectOrder: '',
      originOrder: ''
      // flag: []
    }
  },
  mounted() {
    this.getOutboundList()
  },
  methods: {
    async searchDetail(e) {
      // console.log(e)
      if (e) {
        if (e !== this.originOrder) {
          this.list = this.list.filter(item => item.outboundOrder !== this.originOrder)
        }
        const submitForm = {
          outBoundCode: this.selectOrder
        }
        const res = await getDetailListAPI(submitForm)
        if (res.result === 'OK') {
          this.originOrder = this.selectOrder
          res.data.forEach(item => {
            this.list.push({
              ...item,
              wantQty: item.qty,
              outboundOrder: this.selectOrder,
              flag: ''
            })
          })
        }
      } else {
        this.list = this.list.filter(item => item.outboundOrder !== this.originOrder)
        this.originOrder = ''
      }
    },
    async getOutboundList() {
      const res = await outboundOrderListAPI()
      if (res.result === 'OK') {
        // console.log(res)
        this.outboundList = res.data.map(item => {
          return {
            label: item,
            value: item,
            index: item
          }
        })
      }
    },
    reset() {
      this.list = []
      this.material = {
        productNo: '',
        partnerProductNo: '',
        qty: ''
      }
      this.checkBox = {
        isNightStockUp: 0,
        isAppointmentTally: 0
      }
      this.btn = {
        createLoading: false
      }
    },
    addMaterial() {
      if (!this.material.productNo) {
        return this.$message.warning('请填写物料编码')
      } else if (this.material.productNo && (!this.material.wantQty || this.material.wantQty <= 0)) {
        return this.$message.warning('请填写有效的数量')
      }
      const existingMaterial = this.list.find(item => item.productNo === this.material.productNo)
      if (existingMaterial) {
        // 如果已经存在，提示用户
        this.$message.warning(`物料 ${this.material.productNo} 已经存在`)
        return
      }
      // 如果不存在，将新的物料添加到列表中
      this.list.unshift({ ...this.material, flag: '' })
      // 清空当前输入的物料信息
      this.material = {
        productNo: '',
        partnerProductNo: '',
        wanQty: ''
      }
    },
    async createOrder() {
      if (!(this.list.every(item => item.flag !== 'edit'))) {
        return this.$message.warning('请完成编辑后再创建出库单')
      }
      try {
        this.btn.createLoading = true
        const submitForm = {
          isAppointmentTally: this.checkBox.isAppointmentTally ? 1 : 0,
          isNightStockUp: this.checkBox.isNightStockUp ? 1 : 0,
          productOutboundOrderMaterialVoList: this.list,
          relateOutBoundOrderCode: this.selectOrder
        }
        const res = await createOrderAPI(submitForm)
        if (res.result === 'OK') {
          this.$message.success(res.data)
          this.$router.push('/outBoundManagement/outBoundOrder')
          this.reset()
        } else {
          this.$message.warning(res.data)
        }
      } finally {
        this.btn.createLoading = false
      }
    },
    checkKey(value) {
      if (value) {
        return true
      } else {
        return false
      }
    },
    changeStatus(row) {
      if (row.wantQty === '' || row.wantQty === 0) {
        return this.$message.warning('数量不能为空或零')
      }
      if (row.flag === '') {
        row.flag = 'edit'
      } else {
        row.flag = ''
      }
    },
    delItem(index) {
      this.list.splice(index, 1)
    }
  }
}
</script>

<style scoped>
/* div/deep/.el-card__header {
  border-color: dodgerblue;
  background-color: dodgerblue;
}
.clearfix {
  height: auto;
} */
</style>
